<template>
    <div
        class="marquee-wrap"
        :style="{ width: `${width}px`, height: `${height}px` }"
    >
        <div
            class="marquee"
            ref="marquee"
            :style="{ width: `${width - 8}px`, height: `${height - 8}px` }"
        >
            <div class="wrap" :class="{ notOver }" ref="wrap">
                {{ info }}
            </div>
        </div>
        <div class="rect left-top"></div>
        <div class="rect right-top"></div>
        <div class="rect left-bottom"></div>
        <div class="rect right-bottom"></div>
    </div>
</template>

<script>
export default {
    props: {
        info: {
            default: "",
        },
        width: {
            type: Number,
            default: 410,
        },
        height: {
            type: Number,
            default: 36,
        },
    },
    components: {},
    data() {
        return {
            textWidth: 0,
            marqueeWidth: 0,
            notOver: false,
            timer: null,
        };
    },
    computed: {},
    watch: {
        info(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    this.move();
                });
            }
        },
    },
    methods: {
        move() {
            clearInterval(this.timer);
            let distance = 0;

            this.textWidth = this.$refs["wrap"].getBoundingClientRect().width;
            this.marqueeWidth = this.$refs[
                "marquee"
            ].getBoundingClientRect().width;

            if (this.textWidth > this.marqueeWidth) {
                this.$refs["wrap"].style.left = `${distance}px`;
                this.timer = setInterval(() => {
                    distance = distance - 1;
                    if (-distance >= this.textWidth + 90) {
                        distance = this.marqueeWidth + 60;
                    }
                    this.$refs["wrap"].style.left = `${distance}px`;
                }, 30);
            } else {
                if (this.width == 800) {
                    this.notOver = true;
                }
            }
        },
    },
    destroyed() {
        clearInterval(this.timer);
    },
    updated() {},
};
</script>
<style lang='less' scoped>
.marquee-wrap {
    position: relative;
    border: 1px solid rgba(51, 170, 255, 0.3);
    margin: 0px auto;
    .marquee {
        margin: 3px auto;
        position: relative;
        font-size: 14px;
        color: #8fadcc;
        line-height: 30px;
        overflow: hidden;
        background: rgba(0, 170, 255, 0.08);
        .wrap {
            top: 0;
            position: absolute;
            white-space: nowrap;
            // overflow: scroll;
            &.notOver {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
    .rect {
        width: 3px;
        height: 3px;
        background: #00bfff;
        position: absolute;
        &.left-top {
            left: 0;
            top: 0;
        }
        &.right-top {
            right: 0;
            top: 0;
        }
        &.left-bottom {
            left: 0;
            bottom: 0;
        }
        &.right-bottom {
            right: 0;
            bottom: 0;
        }
    }
}
</style>